/*
 * ControlPanel.fx
 *
 * Created on Nov 20, 2009, 6:55:44 PM
 */

package org.osgifx.ui;
import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.Group;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.effect.Glow;
import org.osgifx.Main;

/**
 * @author johan
 */

public class ControlPanel extends CustomNode {

  public-init var width;
  public-init var height;

  def margin = 20;

  var background: Rectangle = Rectangle {
    x: margin/2, y: margin/2
    width: width-margin, height: height-margin
    fill: Color.LAVENDER;
    stroke: Color.DARKSLATEBLUE;
    arcWidth:20;
    arcHeight:20;
  }

  var addglow = 0.0;
  var addButton: Group = Group {
    translateX: 40
    translateY:30
    content: [
      ImageView {
        image: Image {
          url: "{__DIR__}add.png"
        }
        effect: Glow {
          level: bind addglow
        }
        onMouseEntered: function (evt: MouseEvent) {
          addglow = .3;
        }
        onMouseExited: function (evt: MouseEvent) {
          addglow = 0.0;
        }
        onMouseClicked: function (evt: MouseEvent) {
          Main.showAddBundleScreen();
        }
      }
    ]
  }

  var overviewglow = 0.0;
  var overviewButton: Group = Group {
    translateX: 140
    translateY:30
    content: [
      ImageView {
        image: Image {
          url: "{__DIR__}bundleoverview.png"
        }
        effect: Glow {
          level: bind overviewglow
        }
        onMouseEntered: function (evt: MouseEvent) {
          overviewglow = .3;
        }
        onMouseExited: function (evt: MouseEvent) {
          overviewglow = 0.0;
        }
        onMouseClicked: function (evt: MouseEvent) {
          Main.showBundleOverviewScreen();
        }
      }
    ]
  }

  var appglow = 0.0;
  var appButton: Group = Group {
    translateX: 340
    translateY:30
    content: [
      ImageView {
        image: Image {
          url: "{__DIR__}appoverview.png"
        }
        effect: Glow {
          level: bind appglow
        }
        onMouseEntered: function (evt: MouseEvent) {
          appglow = .3;
        }
        onMouseExited: function (evt: MouseEvent) {
          appglow = 0.0;
        }
        onMouseClicked: function (evt: MouseEvent) {
          Main.showApplicationOverviewScreen();
        }
      }
    ]
  }

  var eventglow = 0.0;
  var eventButton: Group = Group {
    translateX: 240
    translateY:30
    content: [
      ImageView {
        image: Image {
          url: "{__DIR__}eventoverview.png"
        }
        effect: Glow {
          level: bind eventglow
        }
        onMouseEntered: function (evt: MouseEvent) {
          eventglow = .3;
        }
        onMouseExited: function (evt: MouseEvent) {
          eventglow = 0.0;
        }
        onMouseClicked: function (evt: MouseEvent) {
          Main.showEventScreen();
        }
      }
    ]
  }

override protected function create () : Node {
     Group {
      content: [background, addButton, overviewButton, eventButton, appButton]
    }
  }


}
